<!--
 * @Author: lide1202@hotmail.com
 * @Date: 2021-3-13 11:04:24
 * @Last Modified by:   lide1202@hotmail.com
 * @Last Modified time: 2021-3-13 11:04:24
 !-->
<template>
  <avue-draggable
    :step="step"
    :width="widgetsWidth"
    :height="widgetsHeight"
    :left="widgetsLeft"
    :top="widgetsTop"
    ref="draggable"
    :index="index"
    :z-index="-1"
    @focus="handleFocus"
    @blur="handleBlur"
  >
    <component
      :is="type"
      :value="value"
      :isShow="false"
      :componentsID="componentsID"
    />
  </avue-draggable>
</template>

<script>
import widgetHref from "./widgetHref.vue";
import widgetText from "./widgetText.vue";
import WidgetMarquee from "./widgetMarquee.vue";
import widgetTime from "./widgetTime.vue";
import widgetImage from "./widgetImage.vue";
import widgetSlider from "./widgetSlider.vue";
import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue";
// 按钮状态
import widgetSwitch from "./widgetSwitch.vue";
//边框
import widgetBorderBox1 from "./border-box/widgetBorderBox1";
import widgetBorderBox2 from "./border-box/widgetBorderBox2";
import widgetBorderBox3 from "./border-box/widgetBorderBox3";
import widgetBorderBox4 from "./border-box/widgetBorderBox4";
import widgetBorderBox5 from "./border-box/widgetBorderBox5";

import widgetTopology from "./widgetTopology.vue";
// import widgetLineSequenceChart from "../../../bigscreenDesigner/designer/widget/line/widgetLineSequenceChart.vue";

import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./bar/widgetBarlinechart";
import WidgetPiechart from "./pie/widgetPiechart.vue";
// import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./widgetTable.vue";
import widgetLineMap from "./map/widgetLineMap.vue";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import WidgetLineTimeChart from "./widgetLineTimeChart.vue";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetYxData from "./table/widgetYxData";
import widgetYcData from "./table/widgetYcData";
import widgetYmData from "./table/widgetYmData";
import widgetYtData from "./table/widgetYtData";
import widgetYkData from "./table/widgetYkData";
import widgetTaskData from "./table/widgetTaskData";
import widgetDataQuery from "./table/widgetDataQuery";
import widgetAlarmEvent from "./table/widgetAlarmEvent";
import widgetYc from "./table/widgetYc";
import widgetTimeReport from "./table/widgetTimeReport";
import widgetTimeReport2 from "./table/widgetTimeReport2";
import widgetReport from "./table/widgetReport";

export default {
  name: "Widget",
  components: {
    widgetHref,
    widgetText,
    WidgetMarquee,
    widgetTime,
    widgetImage,
    widgetSlider,
    widgetVideo,
    WidgetIframe,
    widgetSwitch,
    widgetBorderBox1,
    widgetBorderBox2,
    widgetBorderBox3,
    widgetBorderBox4,
    widgetBorderBox5,
    widgetTopology,

    widgetBarchart,
    widgetGradientColorBarchart,
    widgetLinechart,
    widgetBarlinechart,
    WidgetPiechart,
    // WidgetFunnel,
    WidgetGauge,
    WidgetPieNightingaleRoseArea,
    widgetTable,
    widgetLineMap,
    widgetPiePercentageChart,
    widgetAirBubbleMap,
    widgetBarStackChart,
    widgetLineStackChart,
    widgetBarCompareChart,
    widgetLineCompareChart,
    WidgetLineTimeChart,
    widgetDecoratePieChart,
    widgetMoreBarLineChart,
    widgetWordCloud,
    widgetHeatmap,
    widgetYxData,
    widgetYcData,
    widgetYtData,
    widgetYmData,
    widgetYkData,
    widgetTaskData,
    widgetDataQuery,
    widgetAlarmEvent,
    widgetYc,
    widgetTimeReport,
    widgetTimeReport2,
    widgetReport,
  },
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    /*
    widget-text widget-marquee widget-href widget-time widget-image widget-slider widget-video widget-table widget-iframe widget-universal
    widget-linechart widget-barlinechart widget-piechart widget-hollow-piechart widget-funnel widget-gauge widget-china-map
    */
    index: Number, // 当前组件，在工作区变量widgetInWorkbench中的索引
    type: String,
    bigscreen: Object,
    value: {
      type: [Object],
      default: () => {},
    },
    step: Number,
    componentsID: String,
  },
  data() {
    return {
      data: {
        setup: {},
        data: {},
        position: {},
      },
    };
  },
  computed: {
    widgetsWidth() {
      return Number(this.value.position.width);
    },
    widgetsHeight() {
      return Number(this.value.position.height);
    },
    widgetsLeft() {
      return Number(this.value.position.left);
    },
    widgetsTop() {
      return Number(this.value.position.top);
    },
    widgetsZIndex() {
      return Number(this.value.position.zIndex || 1);
    },
  },
  mounted() {},
  methods: {
    handleFocus({ index, left, top, width, height }) {},
    handleBlur({ index, left, top, width, height }) {
      this.$emit("onActivated", { index, left, top, width, height });
      this.$refs.draggable.setActive(true);
    },
  },
};
</script>

<style scoped lang="scss">
.vue-draggalbe {
  position: absolute;
}

.widget-active {
  cursor: move;
  border: 1px dashed #09f;
  background-color: rgba(115, 170, 229, 0.5);
}

.avue-draggable {
  padding: 0 !important;
}
</style>
